<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车辆详情页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        /* 整体页面布局样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

        /* 容器样式，用于包裹整个车辆详情内容 */
        .container {
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            border-radius: 5px;
            width: 80%;
            max-width: 800px;
        }

        /* 车辆品牌标题样式，放置在左上角 */
        #carBrand {
            text-align: left;
            color: #333;
            margin-bottom: 10px;
        }

        /* 车辆图片样式，居中放置并添加边框 */
        #carImage {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto 20px;
            border: 2px solid #ddd;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }

        /* 车辆价格样式，添加边框 */
        #carPrice {
            color: #555;
            line-height: 1.6;
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }

        /* 车辆描述样式 */
        #carDescription {
            color: #555;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        /* 给整个车辆信息添加边框，除了左上角的车名 */
        .vehicle-info {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            margin-top: 10px;
        }

        /* 汽车详情部分样式，放置在最下面单独分开 */
        #carDetails {
            margin-top: 20px;
            border-top: 1px solid #ddd;
            padding-top: 15px;
        }
    </style>
</head>

<body>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">汽车商城</a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#" data-page="index" data-url="/dev/views/UserIndex.html">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-page="purchase-guide" data-url="/dev/views/gczl2.html">购车指南</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-page="contact-us" data-url="/dev/views/lxwm2.html">联系我们</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container">
    <h1 id="carBrand"></h1>
    <div class="vehicle-info">
        <img id="carImage" src="" alt="车辆图片">
        <p id="carPrice"></p>
        <p id="carDescription"></p>
    </div>
    <div id="carDetails">
        <!-- 这里可以添加更多详细的汽车详情内容，比如车辆配置、性能参数等 -->
        <h2>汽车详情</h2>
        <p>这部分用于展示更详细的汽车相关信息，可根据实际需求填充内容。</p>
    </div>
    <!-- 其他可能展示的车辆信息元素 -->

    <script src="/dev/plugins/jquery/jquery.min.js"></script>
    <script src="/dev/plugins/bootstrap/js/bootstrap.js"></script>
    <script>
        // 等待页面加载完成
        window.onload = function () {
            // 获取所有的导航链接元素
            var navLinks = document.querySelectorAll('.navbar-nav a');

            // 遍历每个导航链接元素
            navLinks.forEach(function (link) {
                // 为每个导航链接添加点击事件
                link.addEventListener('click', function (e) {
                    e.preventDefault(); // 阻止默认的链接跳转行为

                    // 获取链接元素上的自定义数据属性值
                    const page = this.dataset.page;
                    const url = this.dataset.url;

                    // 根据页面标识进行一些额外的操作（这里可根据实际需求扩展，比如记录页面访问日志等）
                    if (page === "index") {
                        console.log("即将跳转到首页");
                    } else if (page === "purchase-guide") {
                        console.log("即将跳转到购车指南页");
                    } else if (page === "contact-us") {
                        console.log("即将跳转到联系我们页");
                    }

                    // 执行跳转
                    window.location.href = url;
                });
            });
        };


        // 获取URL中的车辆信息参数
        const urlParams = new URLSearchParams(window.location.search);
        const carInfo = {};
        urlParams.forEach((value, key) => {
            carInfo[key] = value;
        });

        // 根据车辆信息展示相应内容
        $('#carBrand').text(carInfo.brand);
        $('#carImage').attr('src', `/dev/img/${carInfo.imagePath}`);
        $('#carDescription').text(carInfo.description);
        $('#carPrice').text(carInfo.price);
        // 处理其他车辆信息的展示，根据实际车辆信息对象的字段进行相应操作
    </script>
</div>
</body>

</html>